<template>
  <div
    id="content-wrapper"
    class="min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible"
    :class="{ 'overflow-hidden max-h-screen fixed': sidebarHidden }"
  >
    <div class="w-full flex">
      <!-- content -->
      <div class="min-w-0 flex-auto px-4 sm:px-6 xl:px-8 pt-10 pb-24 lg:pb-16">
        <slot name="content"></slot>
      </div>
      <!-- 右侧TOC -->
      <div class="hidden xl:text-sm xl:block flex-none w-64 pl-8 mr-8">
        <div
          class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) pt-10 pb-6 top-18"
        >
          <div class="mb-8">
            <h5
              class="text-gray-900 uppercase tracking-wide font-semibold mb-3 text-sm lg:text-xs"
            >
              <font style="vertical-align: inherit"
                ><font style="vertical-align: inherit">在本页面</font></font
              >
            </h5>
            <ul class="overflow-x-hidden text-gray-500 font-medium">
              <li>
                <a
                  href="#using-post-css-as-your-preprocessor"
                  class="block transform transition-colors duration-200 py-2 hover:text-gray-900 text-gray-900"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit"
                      >使用PostCSS作为预处理器</font
                    ></font
                  ></a
                >
              </li>
              <li class="ml-4">
                <a
                  href="#build-time-imports"
                  class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">建立时导入</font></font
                  ></a
                >
              </li>
              <li class="ml-4">
                <a
                  href="#nesting"
                  class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">套料</font></font
                  ></a
                >
              </li>
              <li class="ml-4">
                <a
                  href="#variables"
                  class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">变数</font></font
                  ></a
                >
              </li>
              <li class="ml-4">
                <a
                  href="#future-css-features"
                  class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">未来的CSS功能</font></font
                  ></a
                >
              </li>
              <li>
                <a
                  href="#using-sass-less-or-stylus"
                  class="block transform transition-colors duration-200 py-2 hover:text-gray-900"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit"
                      >使用Sass，Less或Stylus</font
                    ></font
                  ></a
                >
              </li>
              <li class="ml-4">
                <a
                  href="#sass"
                  class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">萨斯</font></font
                  ></a
                >
              </li>
              <li class="ml-4">
                <a
                  href="#less"
                  class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">减</font></font
                  ></a
                >
              </li>
              <li class="ml-4">
                <a
                  href="#stylus"
                  class="block py-2 transition-colors duration-200 hover:text-gray-900 font-medium"
                  ><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">触控笔</font></font
                  ></a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "tv-wrapper",
  props: {
    sidebarHidden: {
      type: Boolean,
      required: true,
    },
  },
});
</script>

<style></style>
